<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="nav-tabs">
        <span class="nav-item" :class="{ active: activeTab === '全部' }" @click="setActiveTab('全部')">全部</span>
        <span class="nav-item" :class="{ active: activeTab === '我管理的' }" @click="setActiveTab('我管理的')">我管理的</span>
        <span class="nav-item" :class="{ active: activeTab === '我学习的' }" @click="setActiveTab('我学习的')">我学习的</span>
      </div>

      <!-- 右侧搜索框 -->
      <el-input
        v-model="searchQuery"
        placeholder="请输入课程名称"
        clearable
        class="search-box"
      >
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
    </div>

    <!-- 过滤栏 -->
    <div class="filter-section">
      <el-radio-group v-model="status" @change="filterCourses">
        <el-radio-button label="全部">全部</el-radio-button>
        <el-radio-button label="进行中">进行中</el-radio-button>
        <el-radio-button label="已结束">已结束</el-radio-button>
      </el-radio-group>

      <!-- 让“新建教学课堂”靠右对齐 -->
      <el-button type="primary" class="create-class-btn" @click="goToCreateClass">新建教学课堂</el-button>
    </div>

    <!-- 课程列表 -->
    <div class="course-list">
      <el-row :gutter="20">
        <el-col :span="8" v-for="course in filteredCourses" :key="course.id">
          <el-card shadow="hover">
            <div class="course-title">{{ course.name }}</div>
            <div class="teacher-info">
              <el-avatar :size="40" :src="course.avatar"></el-avatar>
              <span>{{ course.teacher }}</span>
            </div>
            <div class="course-stats">
              👁️ {{ course.views }} 👥 {{ course.students }} 📑 {{ course.tasks }}
            </div>
            <div class="course-status" :class="{ active: course.status === '进行中' }">
              {{ course.status }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredCourses.length"
        :page-size="9"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";

export default {
  components: { Search },
  setup() {
    const router = useRouter();

    const courses = ref([
      { id: 1, name: "数据结构测试课2025春季班级", teacher: "王老师", avatar: "", views: 41, students: 2, tasks: 3, status: "进行中" },
      { id: 2, name: "计算机网络2025春季班级", teacher: "李老师", avatar: "", views: 55, students: 10, tasks: 5, status: "已结束" },
      { id: 3, name: "机器学习入门2025春季班级", teacher: "张教授", avatar: "", views: 78, students: 12, tasks: 4, status: "进行中" }
    ]);

    const status = ref("全部");
    const searchQuery = ref("");
    const activeTab = ref("全部");

    const setActiveTab = (tab) => {
      activeTab.value = tab;
    };

    const filteredCourses = computed(() => {
      return courses.value.filter(course => {
        return (status.value === "全部" || course.status === status.value) &&
          course.name.includes(searchQuery.value);
      });
    });

    const filterCourses = () => {
      console.log("筛选课程状态：", status.value);
    };

    const handlePageChange = (page) => {
      console.log("当前页：", page);
    };

    // 页面跳转
    const goToCreateClass = () => {
      router.push("/CreateClassroom");
    };

    return { courses, status, searchQuery, filteredCourses, filterCourses, handlePageChange, activeTab, setActiveTab, goToCreateClass };
  }
};
</script>


<style scoped>
.container {
  padding: 20px;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}

/* 左侧导航选项 */
.nav-tabs {
  display: flex;
  gap: 15px;
}

/* 单个导航选项 */
.nav-item {
  font-size: 16px;
  cursor: pointer;
  color: #666;
  padding-bottom: 8px;
}

.nav-item.active {
  color: #409eff;
  font-weight: bold;
  border-bottom: 2px solid #409eff;
}

/* 搜索框 */
.search-box {
  width: 250px;
  min-width: 200px;
  max-width: 300px;
  flex-shrink: 0;
}

/* 过滤栏 */
.filter-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
}

/* 让新建课堂按钮靠右 */
.create-class-btn {
  margin-left: auto;
  white-space: nowrap;
}

/* 课程列表 */
.course-list {
  margin-top: 20px;
}

.course-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.course-stats {
  font-size: 14px;
  color: gray;
  margin-bottom: 10px;
}

.course-status {
  font-weight: bold;
  color: gray;
}

.course-status.active {
  color: green;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>





